// stylelint-disable scss/at-function-named-arguments
$_bg-page: #f6f8fc;
$_bg-page-dark: #151a30;

@use 'sass:color';

html {
  --my-bg-color-page: #{$_bg-page};
  --my-box-shadow-fill: 0 0 10px #e3e9f6;
  --my-bg-color-hover: #{var(--el-fill-color)};
  // 动态的
  --my-change-1x-size: 1px; // 根据 globalSize 动态改变大小 small————1px， default————2px， large————3px
  --my-change-2x-size: 2px; // 根据 globalSize 动态改变大小 small————2px， default————4px， large————6px
  --my-change-3x-size: 3px; // 根据 globalSize 动态改变大小 small————3px， default————6px， large————9px
  --my-change-4x-size: 4px; // 根据 globalSize 动态改变大小 small————4px， default————8px， large————12px
  --my-change-base8-4x-space-width: calc(var(--my-change-4x-size) + 4px);
  --my-change-base12-2x-size: calc(var(--my-change-2x-size) + 10px);
  // 紫色
  --el-color-violet: #b464f6;
  --el-color-violet-light-3: #cb93f9;
  --el-color-violet-light-5: #dab2fb;
  --el-color-violet-light-7: #e9d1fc;
  --el-color-violet-light-8: #f0e0fd;
  --el-color-violet-light-9: #f8f0fe;
  --el-color-violet-dark-2: #9050c5;

  // 青色
  --el-color-cyan: #15d7d4;
  --el-color-cyan-light-3: #5be3e1;
  --el-color-cyan-light-5: #8aebea;
  --el-color-cyan-light-7: #b9f3f2;
  --el-color-cyan-light-8: #d0f7f6;
  --el-color-cyan-light-9: #e8fbfb;

  // 统计块
  --el-color-statistics: #ff0000;
}

html.dark {
  --my-bg-color-page: #{$_bg-page-dark};
  --my-box-shadow-fill: 0 0 10px #13172d;
  --my-bg-color-hover: #{color.scale($_bg-page-dark, $lightness: 16%)};
  // 紫色
  --el-color-violet: #8e41cc;
  --el-color-violet-light-3: #6e3aa4;
  --el-color-violet-light-5: #583689;
  --el-color-violet-light-7: #42326e;
  --el-color-violet-light-8: #382f60;
  --el-color-violet-light-9: #2d2d53;
  --el-color-violet-dark-2: #a567d6;

  // 青色
  --el-color-cyan: #1ebab8;
  --el-color-cyan-light-3: #1f8f96;
  --el-color-cyan-light-5: #20737f;
  --el-color-cyan-light-7: #215668;
  --el-color-cyan-light-8: #21485c;
  --el-color-cyan-light-9: #223951;
  --el-color-cyan-dark-2: #4bc8c6;

  // 统计块
  --el-color-statistics: #ff0000;
}
